<!--- SECURITY --->
<cfif isDefined('session.username')>
<cfelse>
	<cflocation url="login.cfm">
</cfif>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><cfoutput>#application.title#</cfoutput></title>

  <link rel="stylesheet" type="text/css" href="/yui/build/reset-fonts-grids/reset-fonts-grids.css">
  <link rel="stylesheet" type="text/css" href="/yui/build/fonts/fonts-min.css" />
  <link rel="stylesheet" type="text/css" href="/yui/build/tabview/assets/skins/sam/tabview.css" />
  <link rel="stylesheet" type="text/css" href="/yui/build/datatable/assets/skins/sam/datatable.css?_yuiversion=2.4.1" />
  <link rel="stylesheet" type="text/css" href="/yui/build/container/assets/skins/sam/container.css?_yuiversion=2.4.1" />
  <link rel="stylesheet" type="text/css" href="/yui/build/menu/assets/skins/sam/menu.css"> 
  <link rel="stylesheet" type="text/css" href="os-menu.css">
  
  <script type="text/javascript" src="/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  <script type="text/javascript" src="/yui/build/utilities/utilities.js?_yuiversion=2.4.1"></script>
  <script type="text/javascript" src="/yui/build/dragdrop/dragdrop.js?_yuiversion=2.4.1"></script>
  <script type="text/javascript" src="/yui/build/element/element-beta.js"></script>
  <script type="text/javascript" src="/yui/build/container/container.js?_yuiversion=2.4.1"></script>
  <script type="text/javascript" src="/yui/build/tabview/tabview.js"></script>
  <script type="text/javascript" src="/yui/build/datasource/datasource-beta.js"></script>
  <script type="text/javascript" src="/yui/build/datatable/datatable-beta.js"></script>
  <script type="text/javascript" src="/yui/build/menu/menu.js"></script>
  <script type="text/ecmascript" src="js/os-menu.js"></script>
  <script type="text/javascript" src="js/prototype-1.6.0.2.js"></script>

  <style type="text/css">
		html {
			background:#000000;
		}
		#bd {
			background:#FFFFFF;
			width:946px;
			text-align:center;
			border:#666666 solid 2px;
		}
		#ft {
			width:946px;
			text-align:center;
			border:#666666 solid;
			border-width:0 2px 2px 2px;
			background-color:#000000;
		}
		div.workarea {
			padding:0px;
			float:left;
		}
		#workspace {
			margin:19px;
		}
		ul.draglist { 
			position: relative;
			width: 75px; 
			height:100px;
			border: 0;
			list-style: none;
			margin:0;
			padding:0;
		}
		ul.draglist li {
			margin: 1px;
			cursor: move; 
		}
		ul.draglist_alt { 
			position: relative;
			list-style: none;
			margin:0;
			padding:0;
			padding-bottom:0px;
		}
		ul.draglist_alt li {
			margin: 0px;
			cursor: move; 
		}
		#user_actions {
			float: right;
		}
		.label {
			margin-top:-32px;
			font-weight:bold;
		}
		#hd {
			background:url(images/banner.png);
			height:60px;
			width:946px;
			background-repeat:no-repeat;
			border:#999999 solid 2px;
			color:#FFFFFF;
		}
		#hd img {
			position:relative;
			float:right;
			clear:right;
			margin:0px;
			padding:0px;
		}
		#hdtitle {
			float: left;
			margin: 5px;
			font-size: 150%;
		}
		#hdsubtitle {
			margin-left:20px;
			margin-top:5px;
			font-size:80%;
		}
	</style>
	<script type="text/javascript">
	<!--
		function logAction(ax,ay) {
			new Ajax.Request('gateway.cfm', {
					method: 'post', 
					parameters: { myMethod: 'iconSettings', myComponent: 'doors.cfcs.preferences', myIcon: ax, myList: ay },
					onException: function(request, theexception) { 
						alert("Connection Exception: " + theexception.message ); 
					},
					onSuccess: function(xxx) {
//						var i = xxx.responseText;
//						document.getElementById('doc2').innerHTML = i;
//						alert("Success:" + xxx.responseText);
					},
				  onFailure: function(xxx) { 
						var i = xxx.responseText;
						document.getElementById('doc2').innerHTML = i;
				  }
			});
		}
		function getSettings() {
			document.getElementById('settings').style.display = 'block';
			new Ajax.Updater('settings', 'gateway.cfm', {
					method: 'post', 
					parameters: { myMethod: 'getsession', myComponent: 'doors.cfcs.settings' },
					onFailure: function() { 
					alert("There was an error with the connection"); 
				}
			});
		}
	//-->
	</script>
</head>
<body class="yui-skin-sam">

<div id="doc2">
	<div id="hd">
		<div id="hdtitle">
			<cfoutput>#application.title#</cfoutput>
			<div id="hdsubtitle">
				<cfoutput>#application.subtitle#</cfoutput>
			</div>
		</div>
		<img src="images/icon2.png" id="showButton" />
	</div>
	<div id="bd">
		<div id="workspace">
      <div class="workarea">
        <ul id="ul1" class="draglist">
          <li id="li1_1">
          	<img src="images/graph-chart-icon.gif" />
            <div class="label">View</div>
          </li>
        </ul>
      </div>
      <div class="workarea">
        <ul id="ul2" class="draglist">
          <li id="li2_1">
          	<img src="images/pda-icon.gif" />
            <div class="label">Add</div>
          </li>
        </ul>
      </div>	
      <div class="workarea"><ul id="ul3" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul4" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul5" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul6" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul7" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul8" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul9" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul10" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul11" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul12" class="draglist"></ul></div>	
      <div class="workarea">
        <ul id="ul13" class="draglist">
          <li id="li3_1">
          	<img src="images/user-icon.gif" />
            <div class="label">Users</div>
          </li>
        </ul>
      </div>	
      <div class="workarea"><ul id="ul14" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul15" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul16" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul17" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul18" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul19" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul20" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul21" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul22" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul23" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul24" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul25" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul26" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul27" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul28" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul29" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul30" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul31" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul32" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul33" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul34" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul35" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul36" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul37" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul38" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul39" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul40" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul41" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul42" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul43" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul44" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul45" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul46" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul47" class="draglist"></ul></div>	
      <div class="workarea"><ul id="ul48" class="draglist"></ul></div>	
		</div>
	</div>
	<div id="ft">
  <style type="text/css">
	h1.toolbar {
		display:block;
		width:946px;
		border:#FFF solid 0px;
		background-image:url(images/toolbar.png);
		background-repeat:repeat-x;
		height:29px;
		text-align:left;
	}
	h1.toolbar img {
		margin-left:15px;
	}
	div#yproducts {
		display:none;
	}
	</style>

  <h1 class="toolbar">
  	<a id="yahoo" href=""><img src="images/start_button.png" border="0" /></a>
  </h1>
  <div id="yproducts">
  <div class="bd">
  <ul>
  <li><a href="#">Products</a>
  <div id="products">
  <div class="bd">
  <ul>
  <li><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
  <li><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
  <li><a href="http://calendar.yahoo.com">Yahoo! Calender</a></li>
  <li><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
  <li><a href="http://messenger.yahoo.com">Yahoo! Messenger</a></li>
  <li><a href="http://360.yahoo.com">Yahoo! 360</a></li>
  <li><a href="http://www.flickr.com">Flickr Photo Sharing</a></li>
  <li><a href="http://finance.yahoo.com/">Finance</a></li>
  <li><a href="http://entertainment.yahoo.com/">Entertainment</a>
  <div id="entertainmentproducts">
  <div class="bd">
  <ul>
  <li><a href="http://music.yahoo.com/">Yahoo! Music</a></li>
  <li><a href="http://movies.yahoo.com/">Yahoo! Movies</a></li>
  <li><a href="http://tv.yahoo.com/">Yahoo! TV</a></li>
  </ul>
  </div>
  </div>
  </li>
  </ul>
  </div>
  </div>
  </li>
  <li id="search"><a href="http://search.yahoo.com/">Search</a>
  <div id="searchproducts">
  <div class="bd">
  <ul>
  <li><a href="http://images.search.yahoo.com/images">Yahoo! Image Search</a></li>
  <li><a href="http://dir.yahoo.com/">Yahoo! Directory</a></li>
  <li><a href="http://local.yahoo.com">Yahoo! Local</a></li>
  <li><a href="http://news.search.yahoo.com/news">Yahoo! News Search</a></li>
  <li><a href="http://search.yahoo.com/people">Yahoo! People Search</a></li>
  <li><a href="http://search.yahoo.com/products">Yahoo! Product Search</a></li>
  </ul>
  </div>
  </div>                    
  </li>
  <li id="help" onclick="getSettings();">Settings</li>
  </ul>
  </div>
  </div>
  </div>
</div>

<script type="text/javascript">

(function() {

var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var DDM = YAHOO.util.DragDropMgr;

//////////////////////////////////////////////////////////////////////////////
// example app
//////////////////////////////////////////////////////////////////////////////
YAHOO.example.DDApp = {
    init: function() {

        var rows=1,cols=48,i,j;
        for (i=1;i<cols+1;i=i+1) {
            new YAHOO.util.DDTarget("ul"+i);
        }

        for (i=1;i<cols+1;i=i+1) {
            for (j=1;j<rows+1;j=j+1) {
                new YAHOO.example.DDList("li" + i + "_" + j);
            }
        }

        Event.on("showButton", "click", this.showOrder);
        Event.on("switchButton", "click", this.switchStyles);
        
        Dom.setStyle("yproducts", "display", "block");
    },

    showOrder: function() {
        var parseList = function(ul, title) {
            var items = ul.getElementsByTagName("li");
            var out = title + ": ";
            for (i=0;i<items.length;i=i+1) {
                out += items[i].id + " ";
            }
            return out;
        };

        var ul1=Dom.get("ul1"),
					  ul2=Dom.get("ul2"),
						ul3=Dom.get("ul3"),
						ul4=Dom.get("ul4"),
						ul5=Dom.get("ul5"),
						ul6=Dom.get("ul6"),
						ul7=Dom.get("ul7"),
						ul8=Dom.get("ul8"),
						ul9=Dom.get("ul9"),
						ul10=Dom.get("ul10"),
						ul11=Dom.get("ul11"),
						ul12=Dom.get("ul12"),
						ul13=Dom.get("ul13"),
						ul14=Dom.get("ul14"),
						ul15=Dom.get("ul15"),
						ul16=Dom.get("ul16"),
						ul17=Dom.get("ul17"),
						ul18=Dom.get("ul18"),
						ul19=Dom.get("ul19"),
						ul20=Dom.get("ul20"),
						ul21=Dom.get("ul21"),
						ul22=Dom.get("ul22"),
						ul23=Dom.get("ul23"),
						ul24=Dom.get("ul24"),
						ul25=Dom.get("ul25"),
						ul26=Dom.get("ul26"),
						ul27=Dom.get("ul27"),
						ul28=Dom.get("ul28"),
						ul29=Dom.get("ul29"),
						ul30=Dom.get("ul30"),
						ul31=Dom.get("ul31"),
						ul32=Dom.get("ul32"),
						ul33=Dom.get("ul33"),
						ul34=Dom.get("ul34"),
						ul35=Dom.get("ul35"),
						ul36=Dom.get("ul36"),
						ul37=Dom.get("ul37"),
						ul38=Dom.get("ul38"),
						ul39=Dom.get("ul39"),
						ul40=Dom.get("ul40"),
						ul41=Dom.get("ul41"),
						ul42=Dom.get("ul42"),
						ul43=Dom.get("ul43"),
						ul44=Dom.get("ul44"),
						ul45=Dom.get("ul45"),
						ul46=Dom.get("ul46"),
						ul47=Dom.get("ul47"),
						ul48=Dom.get("ul48");
					
        alert(parseList(ul1, "List 1") + parseList(ul2, "List 2") + "\n" 
							+ parseList(ul3, "List 3") + parseList(ul4, "List 4") + "\n" 
							+ parseList(ul5, "List 5") + parseList(ul6, "List 6") + "\n" 
							+ parseList(ul7, "List 7") + parseList(ul8, "List 8") + "\n" 
							+ parseList(ul9, "List 9") + parseList(ul10, "List 10") + "\n"
							+ parseList(ul11, "List 11") + parseList(ul12, "List 12") + "\n"
							+ parseList(ul13, "List 13") + parseList(ul14, "List 14") + "\n"
							+ parseList(ul15, "List 15") + parseList(ul16, "List 16") + "\n"
							+ parseList(ul17, "List 17") + parseList(ul18, "List 18") + "\n"
							+ parseList(ul19, "List 19") + parseList(ul20, "List 20") + "\n"
							+ parseList(ul21, "List 21") + parseList(ul22, "List 22") + "\n"
							+ parseList(ul23, "List 23") + parseList(ul24, "List 24") + "\n"
							+ parseList(ul25, "List 25") + parseList(ul26, "List 26") + "\n"
							+ parseList(ul27, "List 27") + parseList(ul28, "List 28") + "\n"
							+ parseList(ul29, "List 29") + parseList(ul30, "List 30") + "\n"
							+ parseList(ul31, "List 31") + parseList(ul32, "List 32") + "\n"
							+ parseList(ul33, "List 33") + parseList(ul34, "List 34") + "\n"
							+ parseList(ul35, "List 35") + parseList(ul36, "List 36") + "\n"
							+ parseList(ul37, "List 37") + parseList(ul38, "List 38") + "\n"
							+ parseList(ul39, "List 39") + parseList(ul40, "List 40") + "\n"
							+ parseList(ul41, "List 41") + parseList(ul42, "List 42") + "\n"
							+ parseList(ul43, "List 43") + parseList(ul44, "List 44") + "\n"
							+ parseList(ul45, "List 45") + parseList(ul46, "List 46") + "\n"
							+ parseList(ul47, "List 47") + parseList(ul48, "List 48") 																					
							);
    },

    switchStyles: function() {
        Dom.get("ul1").className = "draglist_alt";
        Dom.get("ul2").className = "draglist_alt";
        Dom.get("ul3").className = "draglist_alt";

    }
};

//////////////////////////////////////////////////////////////////////////////
// custom drag and drop implementation
//////////////////////////////////////////////////////////////////////////////

YAHOO.example.DDList = function(id, sGroup, config) {

    YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);

    this.logger = this.logger || YAHOO;
    var el = this.getDragEl();
    Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent

    this.goingUp = false;
    this.lastY = 0;
};

YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {

    startDrag: function(x, y) {
        this.logger.log(this.id + " startDrag");

        // make the proxy look like the source element
        var dragEl = this.getDragEl();
        var clickEl = this.getEl();
        Dom.setStyle(clickEl, "visibility", "hidden");

        dragEl.innerHTML = clickEl.innerHTML;

        Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
        Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
        Dom.setStyle(dragEl, "border", "2px solid gray");
    },

    endDrag: function(e) {

        var srcEl = this.getEl();
        var proxy = this.getDragEl();

        // Show the proxy element and animate it to the src element's location
        Dom.setStyle(proxy, "visibility", "");
        var a = new YAHOO.util.Motion( 
            proxy, { 
                points: { 
                    to: Dom.getXY(srcEl)
                }
            }, 
            0.2, 
            YAHOO.util.Easing.easeOut 
        )
        var proxyid = proxy.id;
        var thisid = this.id;

        // Hide the proxy and show the source element when finished with the animation
        a.onComplete.subscribe(function() {
                Dom.setStyle(proxyid, "visibility", "hidden");
                Dom.setStyle(thisid, "visibility", "");
            });
        a.animate();
    },

    onDragDrop: function(e, id) {
/* ------------------------------------------------------------------------------------------------------- */
        var stest = this.getEl().id;
				logAction(stest, id);
/* ------------------------------------------------------------------------------------------------------- */				
        // If there is one drop interaction, the li was dropped either on the list,
        // or it was dropped on the current location of the source element.
        if (DDM.interactionInfo.drop.length === 1) {

            // The position of the cursor at the time of the drop (YAHOO.util.Point)
            var pt = DDM.interactionInfo.point; 

            // The region occupied by the source element at the time of the drop
            var region = DDM.interactionInfo.sourceRegion; 
						//loglocation();

            // Check to see if we are over the source element's location.  We will
            // append to the bottom of the list once we are sure it was a drop in
            // the negative space (the area of the list without any list items)
            if (!region.intersect(pt)) {
                var destEl = Dom.get(id);
								//alert(destEl.id);
                var destDD = DDM.getDDById(id);
                destEl.appendChild(this.getEl());
                destDD.isEmpty = false;
                DDM.refreshCache();
            }

        }
    },

    onDrag: function(e) {

        // Keep track of the direction of the drag for use during onDragOver
        var y = Event.getPageY(e);

        if (y < this.lastY) {
            this.goingUp = true;
        } else if (y > this.lastY) {
            this.goingUp = false;
        }

        this.lastY = y;
    },

    onDragOver: function(e, id) {
    
        var srcEl = this.getEl();
        var destEl = Dom.get(id);

        // We are only concerned with list items, we ignore the dragover
        // notifications for the list.
        if (destEl.nodeName.toLowerCase() == "li") {
            var orig_p = srcEl.parentNode;
            var p = destEl.parentNode;

            if (this.goingUp) {
                p.insertBefore(srcEl, destEl); // insert above
            } else {
                p.insertBefore(srcEl, destEl.nextSibling); // insert below
            }

            DDM.refreshCache();
        }
    }
});

Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);

})();


</script>

<a href="session.cfm" target="_blank">My Session</a>

</body>
</html>
